<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通知发送系统</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    #app{
      width: 100vh;
    }

    body {
      /* background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); */
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    
    .container {
      width: 100%;
      /* max-width: 800px; */
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
    
    .header {
      background: linear-gradient(to right, #3498db, #2c3e50);
      color: white;
      padding: 25px 30px;
      text-align: center;
    }
    
    .header h1 {
      font-size: 28px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    
    .header p {
      opacity: 0.9;
      font-size: 16px;
    }
    
    .notification-icon {
      font-size: 32px;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    
    .form-container {
      padding: 30px;
    }
    
    .form-group {
      margin-bottom: 25px;
    }
    
    label {
      display: block;
      margin-bottom: 10px;
      font-weight: 600;
      color: #2c3e50;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    textarea {
      width: 100%;
      min-height: 180px;
      padding: 16px;
      border: 2px solid #e0e6ed;
      border-radius: 12px;
      font-size: 16px;
      line-height: 1.6;
      resize: vertical;
      transition: all 0.3s ease;
    }
    
    textarea:focus {
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
      outline: none;
    }
    
    .char-counter {
      text-align: right;
      margin-top: 8px;
      font-size: 14px;
      color: #7f8c8d;
    }
    
    .char-counter.warning {
      color: #e74c3c;
      font-weight: bold;
    }
    
    .buttons {
      display: flex;
      gap: 15px;
      margin-top: 20px;
    }
    
    button {
      flex: 1;
      padding: 16px;
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .btn-send {
      background: linear-gradient(to right, #2ecc71, #27ae60);
      color: white;
      box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
    }
    
    .btn-send:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
    }
    
    .btn-send:active {
      transform: translateY(0);
    }
    
    .btn-reset {
      background: linear-gradient(to right, #e74c3c, #c0392b);
      color: white;
      box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2);
    }
    
    .btn-reset:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
    }
    
    .btn-reset:active {
      transform: translateY(0);
    }
    
    .response-section {
      margin-top: 30px;
      padding: 20px;
      background-color: #f8f9fa;
      border-radius: 12px;
      border-left: 4px solid #3498db;
    }
    
    .response-section h3 {
      color: #2c3e50;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .response-content {
      background: white;
      padding: 15px;
      border-radius: 8px;
      font-family: monospace;
      font-size: 14px;
      max-height: 200px;
      overflow-y: auto;
      white-space: pre-wrap;
    }
    
    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .status-idle {
      background-color: #7f8c8d;
    }
    
    .status-sending {
      background-color: #f39c12;
      animation: blink 1.5s infinite;
    }
    
    .status-success {
      background-color: #2ecc71;
    }
    
    .status-error {
      background-color: #e74c3c;
    }
    
    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    
    .preview-section {
      margin-top: 30px;
      padding: 25px;
      background: #f8f9fa;
      border-radius: 12px;
      border: 1px dashed #3498db;
    }
    
    .preview-section h3 {
      color: #2c3e50;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .preview-content {
      background: white;
      padding: 20px;
      border-radius: 8px;
      line-height: 1.7;
      font-size: 16px;
      min-height: 100px;
      white-space: pre-wrap;
    }
    
    .empty-preview {
      color: #95a5a6;
      font-style: italic;
    }
    
    .api-info {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 15px;
      font-size: 14px;
      border-radius: 0 0 12px 12px;
    }
    
    .api-info code {
      background: rgba(255, 255, 255, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: monospace;
    }
    
    @media (max-width: 600px) {
      .buttons {
        flex-direction: column;
      }
      
      .header h1 {
        font-size: 24px;
      }
      
      .form-container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <!-- <div class="header">
        <h1>
          <span class="notification-icon">📢</span>
          通知发送系统
        </h1>
        <p>创建并发送通知到用户邮箱和消息中心</p>
      </div> -->
      
      <div class="form-container">
        <div class="form-group">
          <label for="content">
            <span>📝</span>
            通知内容
          </label>
          <textarea 
            id="content" 
            v-model="content" 
            placeholder="请输入通知内容..."
            @input="updateContent"
          ></textarea>
          <div class="char-counter" :class="{'warning': content.length > 500}">
            {{ content.length }}/500
          </div>
        </div>
        
        <div class="buttons">
          <button class="btn-send" @click="sendNotification" :disabled="isSending">
            <span v-if="isSending">发送中...</span>
            <span v-else>发送通知</span>
            <span v-if="isSending">⏳</span>
            <span v-else>📤</span>
          </button>
          <button class="btn-reset" @click="resetForm">
            <span>重置</span>
            <span>🔄</span>
          </button>
        </div>
        
        <div class="preview-section">
          <h3>
            <span>👁️</span>
            通知预览
          </h3>
          <div class="preview-content">
            <template v-if="content">
              {{ content }}
            </template>
            <div v-else class="empty-preview">
              输入内容后将在此处显示预览
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        content: '',
        responseMessage: '',
        isSending: false,
        status: 'idle' // idle, sending, success, error
      },
      computed: {
        statusClass() {
          return {
            'status-idle': this.status === 'idle',
            'status-sending': this.status === 'sending',
            'status-success': this.status === 'success',
            'status-error': this.status === 'error'
          };
        }
      },
      methods: {
        updateContent() {
          // 限制内容长度
          if (this.content.length > 500) {
            this.content = this.content.substring(0, 500);
          }
        },
        
        sendNotification() {
          if (!this.content.trim()) {
            this.responseMessage = '错误：通知内容不能为空';
            this.status = 'error';
            return;
          }
          
          this.isSending = true;
          this.status = 'sending';
          this.responseMessage = '正在发送通知...';
          
          // 构建符合接口要求的数据结构
          const payload = {
            notification: {
              message: this.content,
              id: 0,
              createdAt: ""
            },
            emailRequest: {
              to: [],
              subject: "系统通知",
              content: this.content
            },
            content: this.content
          };
          
          // 发送请求到后端API
          axios.post('http://localhost:8081/notifications/send', payload)
            .then(response => {
              this.responseMessage = `通知发送成功！\n响应状态: ${response.status}\n响应数据: ${JSON.stringify(response.data, null, 2)}`;
              this.status = 'success';
            })
            .catch(error => {
              if (error.response) {
                // 服务器返回了错误响应
                this.responseMessage = `发送失败: ${error.response.status} - ${error.response.data}\n请检查后端服务是否运行正常`;
              } else if (error.request) {
                // 请求已发送但无响应
                this.responseMessage = '错误：未收到服务器响应\n请检查网络连接或后端服务是否运行';
              } else {
                // 请求设置错误
                this.responseMessage = `请求错误: ${error.message}`;
              }
              this.status = 'error';
            })
            .finally(() => {
              this.isSending = false;
            });
        },
        
        resetForm() {
          this.content = '';
          this.responseMessage = '';
          this.status = 'idle';
        }
      }
    });
  </script>
</body>
</html>